Vue3 Beginner's Notes 3 ---- Using Element Plus to Partition the Page Layout and Implement the Left-Side Common Menu

Posted on Views: Waline: Word count in article: 1.3k Reading time ≈ 5 mins.
This series of notes focuses on building a project with Vue3 and interacting with the backend API. It introduces the website page layout, including left-right partitioning and common components. It also explains the installation and import of Element Plus, modification of the initial style of Vue3, implementation of the layout, and creation of the CommonAside component.

This series of notes will focus on how to set up a project using Vue3 and interact with the backend API. It won’t cover the basic features of Vue. For the basic features of Vue, you can refer to this video Get Started with Vue in Four Hours. I got started with Vue by watching this video and thought it was pretty good.

Code address: https://github.com/yexia553/vue_study/tree/%E9%85%8D%E7%BD%AEvue-router/vue3-notes

Page Layout Description and Effect Demonstration

Every website has its own layout. The so - called layout is about what information is displayed in which area. The following picture shows the layout effect we designed, which is divided into three parts.

The left side of the page is a whole, used to display the menu bar, that is, to show what modules the website has. The right side is divided into upper and lower parts. The upper part is used to display the user’s avatar. Clicking on the avatar can perform operations such as logging out. The lower part on the right is the main area of the website, displaying the information we want to convey to the users.

Since the left - side menu bar and the upper - right part are needed on every page, we can make these two parts into common components. We can name the left - side menu bar CommonAside, and the upper - right part CommonHeader.

Introduction to Element Plus

People who know Vue basically know Element UI (used with Vue2) or Element Plus. Their function is to encapsulate a lot of UI libraries for us to use directly. For example, if we want to implement a table, we can use the el - table tag to help us achieve it.

Implementing the Layout

1. Installation

To use Element Plus, we need to install it first. Execute the following command in the root directory of the project:

1
npm install element-plus --save

Since we will also use the icons in Element Plus later, we install them together here:

1
npm install @element-plus/icons-vue

2. Importing

After installation, we need to import Element Plus into Vue3 to use it. We adopt the global import method. In fact, there are several ways to import it. You can click here to see what specific import methods there are.

The import method is configured in main.js. After configuration, main.js is as follows. I have noted in the code which codes are required for the import. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'  // Required for importing Element Plus
import 'element-plus/dist/index.css'  // Required for importing Element Plus
import router from './router/index.js'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'  // Required for importing Element Plus icon
import './assets/main.css'

const app = createApp(App)

// Required for importing Element Plus icon
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
    app.component(key, component)
}

app.use(router)
app.use(ElementPlus)  // Required for importing Element Plus
app.mount('#app')
```  

#### 3. Modifying the Initial Style of Vue3
When creating a project in Vue3, there are some default styles, that is, CSS. In the path /src/assets/ in the root directory of the project, there are two style files, base.css and main.css. We can modify main.css.  

We mainly modify the two **#app** parts in main.css. After modification, it is as follows:
```css
#app {
    /* max-width: 1280px; */
    margin: 0;
    padding: 0;
    font-weight: normal;
    height: 100vh;
    width: 100%;
}
1
2
3
4
5
#app {
    /* display: grid; */
    /* grid-template-columns: 1fr 1fr; */
    padding: 0;
}

I won’t explain the CSS part in detail. The main purpose is to enable Vue to display our page correctly in the browser. If you don’t understand it, you need to learn a little bit about CSS.

Implementing the Layout

In the previous note about routes, we wrote the following in Main.vue:

1
2
3
<template>
Home    
</template>

We now replace the content inside with the following part:

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="180px">
                Aside
            </el-aside>
            <el-container>
                <el-header>Header</el-header>
                <el-main>Main</el-main>
            </el-container>
        </el-container>
    </div>
</template>

After replacement, everyone execute npm run dev in the root directory of the project to run the project. You should be able to see the following page:
Simple effect of Vue page layout

As you can see, although it is very simple, the overall framework of the page has come out.

CommonAside Component

As mentioned above, we can extract the left - side menu bar into a component, called CommonAside. Let’s implement it now.

Creating the CommonAside.vue File

First, delete the content automatically created when the project was initialized in src/components.
Create the CommonAside.vue file in the src/components path. The content of the file is as follows: 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<template>
    <el-menu class="el-menu-vertical-demo" background-color="#545c64" text-color="#fff" :collapse-transition="false"
        active-text-color="#ffd04b">
        <h3>Background Management</h3>
        <el-menu-item :index="item.path+''" v-for="item in list" :key="item.label">
            <component class="icons" :is="item.icon"></component>
            <span>{{item.label}}</span>
        </el-menu-item>
    </el-menu>
</template>


<script>
export default {
    setup() {
        const list = [
            {
                path: '/user',
                name: 'user',
                label: 'User Management',
                icon: 'user',
                url: '/user'
            },
            {
                label: 'Others',
                name: 'other',
                icon: 'location',
                path: '/other',
                url: 'other'
            },
        ];
        return {
            list,
        }
    }
}
</script>

<style lang="less" scoped>
.icons {
    width: 18px;
    height: 18px;
    margin-right: 4px;
}
.el-menu-vertical-demo {
    width: 100%;
    border-right: none;
    h3 {
        color: #fff;
        text-align: center;
        margin-top: 10px;
    }
}
</style>

The code is divided into three parts: template, script, and style. Let’s explain them separately.

Template

In the template, we use the el - menu tag to achieve the style we need. In fact, we only use a very simple part here. There are many methods and attributes that we haven’t used. You can take a closer look at the official website of Element Plus.

Script

The script contains JavaScript code. Vue3 supports both the Options API and the Composition API. I use the Composition API. Regarding the differences between the two and how to choose, you can refer to here

In the script, I actually just defined and returned a list containing the content of the left - side menu.

Style

The style contains styles, that is, CSS. But I use less. Regarding the part of less, you can refer to here. In fact, if you don’t know less, it doesn’t matter. Just look at the above code and imitate it. I don’t really know less either, I can only imitate.

Using the CommonAside.vue Component

As analyzed before, the CommonAside component will appear on all pages. So we can import this component in Main.vue. After import, the content of Main.vue is as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<template>
    <div class="common-layout">
        <el-container>
            <el-aside width="180px">
                <!-- Note the method of referencing the CommonAside component here. It is split into two characters and connected with a hyphen -->
                <common-aside></common-aside>
            </el-aside>
            <el-container>
                <el-header>Header</el-header>
                <el-main>Main</el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
import CommonAside from "../components/CommonAside.vue";
export default {
    components: {
        CommonAside,
    }
}
</script>

<style lang="less" scoped>
.common-layout {
    height: 100%;
    &>.el-container {
        height: 100%;
        &>.el-aside {
            height: 100%;
            background: #545c64;
        }
        &>.el-container {
            &>.el-header {
                padding: 0%;
            }
        }
    }
}
</style>

The content of the code is very simple. I’ll just explain a small knowledge point in the style.

.common-layout means that the style in the following curly braces will take effect within the range of class=”common-layout”.
We will see &>.el-container under.common-layout, which is related to the el - container inside common - layout. If there is also an el - container outside.common-layout, it will not take effect.

Up to this point, the CommonAside component is also completed. After starting the project, the page should be as follows:
Effect of Vue3 common aside